<template>
  <div class="demo">
    <div class="demo-title">多层抽屉</div>
    <div class="demo-content">
      <Button type="primary" @click="showDrawer">Open</Button>
      <Drawer
        v-model:visible="open"
        title="Multi-level drawer"
        width="520"
        :closable="false"
        :footer-style="{ textAlign: 'right' }"
        @close="onClose"
      >
        <Button type="primary" @click="showChildrenDrawer">Two-level drawer</Button>
        <Drawer
          v-model:visible="childrenDrawer"
          title="Two-level Drawer"
          width="320"
          :closable="false"
        >
          <Button type="primary" @click="showChildrenDrawer">This is two-level drawer</Button>
        </Drawer>
        <template #footer>
          <Button style="margin-right: 8px" @click="onClose">Cancel</Button>
          <Button type="primary" @click="onClose">Submit</Button>
        </template>
      </Drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Drawer from '@sscd/drawer';
  const open = ref<boolean>(false);
  const childrenDrawer = ref<boolean>(false);
  const showDrawer = () => {
    open.value = true;
  };
  const onClose = () => {
    open.value = false;
  };
  const showChildrenDrawer = () => {
    childrenDrawer.value = true;
  };
</script>
